<template>
	<view>
		<view class="tab-container">
			<view v-for="(item,index) in list" class="tab-item" :class="{'active' : (current == index)}" @click="onTabItemClick(index)">
				{{item.name}}
				<view class="active-line" v-if="current == index"></view>
			</view>
		</view>
		<view class="tab-content">
			<!-- {{tabContent}} -->
			<template v-for="item in dataList">
				<order-item :orderTitle="item.taskTitle" :money="item.moneyReward" :userType="item.publishId == vuex_userInfo.userId ? 0 : 1"
				 :phoneNumber="item.publishPhone" :workerPhoneNumber="item.workerPhone" :user="item.publishName" :workerName="item.workerName"
				 :remarks="item.workContent" :toPlace="item.toAddress" :fromPlace="item.pickUpAddress" :orderStatus="item.taskStatus"
				 @click="onClickItem(item)" @confirm="onClickConfirm(item.taskId,item.publishId)" @cancel="onClickCancel(item.taskId,item.publishId,item.taskStatus)"></order-item>
			</template>
			<u-loadmore :status="status" :load-text="loadText" @loadmore="loadMore" />
		</view>
	</view>
</template>

<script>
	export default {
		// 当页面加载完毕
		onReady() {},
		// 上拉加载
		onReachBottom() {
			console.log('开始上拉刷新')
			if (this.pagination.hasNextPage) {
				// 存在下一页
				this.status = 'loading'
				this.getTabData(this.current, ++this.pagination.current)

			} else {
				this.status = 'nomore'
			}
		},
		data() {
			return {
				list: [{
						name: '全部订单'
					}, {
						name: '我发布的'
					}, {
						name: '我接受的'
					},
					{
						name: '已取消的'
					}
				],
				current: 0,
				pagination: {
					current: 0,
					hasNextPage: false,
					pageSize: 5
				},
				tabContent: '',
				dataList: [],
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '人家也是有底线的'
				},

			}
		},
		methods: {

			/** 当tabItem被点击时
			 * @param {Object} index 被点击的索引
			 */
			onTabItemClick(index) {
				//切换当前current
				this.current = index
				// 判断当前的tab选项,当点击则重新请求数据 默认第一页
				this.getTabData(index, 1);
			},
			getTabData(index, current) {
				const all = 0,
					released = 1,
					accepted = 2,
					cancel = 3;
				switch (index) {
					case all:
						console.log('全部订单 -> 请求数据');
						this.tabContent = '全部订单 -> 请求数据'
						this.$u.api.taskCenter(current, this.pagination.pageSize, 'type=0').then(res => {
							console.log(res)
							if (current == 1) {
								this.dataList = res.data.list
							} else {
								// 翻页
								for (let i in res.data.list) {
									// 压入
									this.dataList.push(res.data.list[i])
								}
							}
							this.pagination.hasNextPage = res.data.hasNextPage
							this.pagination.hasNextPage ? this.status = 'loadmore' : this.status = 'nomore'

						})
						break;
					case released:
						console.log('我发布的 -> 请求数据');
						this.tabContent = '我发布的 -> 请求数据'
						this.$u.api.taskCenter(current, this.pagination.pageSize, 'type=1').then(res => {
							console.log(res)
							if (current == 1) {
								this.dataList = res.data.list
							} else {
								// 翻页
								for (let i in res.data.list) {
									// 压入
									this.dataList.push(res.data.list[i])
								}
							}
							this.pagination.hasNextPage = res.data.hasNextPage
							this.pagination.hasNextPage ? this.status = 'loadmore' : this.status = 'nomore'
						})
						break;
					case accepted:
						console.log('我接受的 -> 请求数据');
						this.tabContent = '我接受的 -> 请求数据'
						this.$u.api.taskCenter(current, this.pagination.pageSize, 'type=2').then(res => {
							console.log(res)
							if (current == 1) {
								this.dataList = res.data.list
							} else {
								// 翻页
								for (let i in res.data.list) {
									// 压入
									this.dataList.push(res.data.list[i])
								}
							}
							this.pagination.hasNextPage = res.data.hasNextPage
							this.pagination.hasNextPage ? this.status = 'loadmore' : this.status = 'nomore'
						})
						break;
					case cancel:
						console.log('已取消的 -> 请求数据');
						this.tabContent = '已取消的 -> 请求数据'
						this.$u.api.taskCenter(current, this.pagination.pageSize, 'type=3').then(res => {
							console.log(res)
							if (current == 1) {
								this.dataList = res.data.list
							} else {
								// 翻页
								for (let i in res.data.list) {
									// 压入
									this.dataList.push(res.data.list[i])
								}
							}
							this.pagination.hasNextPage = res.data.hasNextPage
							this.pagination.hasNextPage ? this.status = 'loadmore' : this.status = 'nomore'
						})
						break;
				}
			},
			onClickConfirm(id) {
				console.log("确认被点击")
				this.$u.api.confirmTask(id).then(res => {
					console.log(res)
					this.getTabData(this.current, 1) // 重新加载数据
				})

			},
			onClickCancel(id, userId, status) {
				console.log("取消被单击")
				let param = {
					cancelReason: '不想要了', //TODO 应该弹出弹窗来确认完成并填写原因
					taskId: id
				}
				if (userId == this.vuex_userInfo.userId) {
					// 当前为下单人的订单
					if (status == 0) {
						uni.showModal({
							title: "再次确认",
							content: "你确认取消订单吗?",
							success: (res) => {
								if (res.confirm) {
									// 确认
									this.$u.api.cancelTask(param).then(res => {
										console.log(res)
										uni.showModal({
											title: "提示",
											content: "你成功取消了订单",
											showCancel: false,
											success: () => {
												this.getTabData(this.current, 1) // 重新加载数据
											}
										})
									})
								}
							}
						})
					} else {
						uni.showModal({
							title: "再次确认",
							content: "骑手可能正在赶来的路上，建议您与骑手电话确认后取消订单",
							confirmText: "确认取消",
							cancelText: "暂不取消",
							success: (res) => {
								if (res.confirm) {
									// 确认
									this.$u.api.cancelTask(param).then(res => {
										console.log(res)
										uni.showModal({
											title: "提示",
											content: "你成功取消了订单",
											showCancel: false,
											success: () => {
												this.getTabData(this.current, 1) // 重新加载数据
											}
										})
									})
								}
							}
						})
					}
				} else {
					// 当前为接单人的订单
					uni.showModal({
						title: "再次确认",
						content: "发布用户可能正焦急地等待，建议您与发布用户电话确认后取消订单",
						confirmText: "确认取消",
						cancelText: "暂不取消",
						success: (res) => {
							if (res.confirm) {
								//确认
								this.$u.api.cancelTaskByWorker(param).then(res => {
									console.log(res)
									uni.showModal({
										title: "提示",
										content: "你成功取消了订单",
										showCancel: false,
										success: () => {
											this.getTabData(this.current, 1) // 重新加载数据
										}
									})
								})
							}
						}
					})
				}
			},
			onClickItem(item) {
				console.log("item被单击")
				uni.navigateTo({
					url: '../taskDetail/taskDetail?from=taskCenter',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							console.log(data)
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', item)
					}
				});
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.current)
			this.current = Number(option.current)
			//TODO 第一次进入页面时, 需要请求数据
			this.getTabData(this.current)
		}

	}
</script>

<style lang='scss' scoped>
	.tab-container {
		background-color: #fff;
		padding: 25rpx;
		display: flex;
		justify-content: space-between;

		.tab-item {
			position: relative;
			font-size: 25rpx;
			color: #9f9f9f;

			&.active {
				color: #000;
				font-weight: bold;
			}

			.active-line {
				position: absolute;
				width: 50rpx;
				height: 5rpx;
				background: #000;
				bottom: -10rpx;
			}
		}
	}
</style>
